<template>
  <div class="wrap">
    <el-dialog title="查询客户" :visible.sync="customerDialog" width="80%" :close-on-click-modal="false"
      :close-on-press-escape="false" @close="customerClose">
      <div class="dialog-wrap">
        <el-input v-model="customerName" placeholder="请搜索客户" clearable suffix-icon="el-icon-search"
          @input="queryCustomerToUserInfo" style="width: 250px; margin-right: 15px"></el-input>
        <el-select v-model="followStatus" clearable placeholder="请选择跟进阶段" class="header-search-select"
          @change="queryCustomerToUserInfo" @remove-tag="queryCustomerToUserInfo">
          <el-option v-for="item in followStatusList" :key="item.dictValue" :value="item.dictValue"
            :label="item.dictLabel" />
        </el-select>
      </div>
      <div style="padding: 20px">
        <el-table v-loading="loading" :data="customerList" style="width: 100%" height="380">
          <el-table-column width="55" align="center" label="">
            <template slot-scope="scope">
              <el-checkbox :checked="scope.row.checked" @change="selectionChange(scope.row, $event)"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" prop="name" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span style="color: #082aff"> {{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="手机" prop="phone" show-overflow-tooltip></el-table-column>
          <el-table-column label="邮箱" align="center" prop="email" show-overflow-tooltip />
          <el-table-column label="微信号" align="center" prop="wxAccount" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="微信名称" align="center" prop="wxName" show-overflow-tooltip></el-table-column>
          <el-table-column label="性别" align="center" prop="gender" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <div v-for="item in userSex" :key="item.dictValue">
                <span v-if="row.gender === item.dictValue">{{
                    item.dictLabel
                }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="标签" align="center" prop="tag" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="跟进阶段" align="center" prop="followStatus" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <div v-for="item in followStatusList" :key="item.dictValue">
                <span v-if="row.followStatus === item.dictValue">{{
                    item.dictLabel
                }}</span>
              </div>
            </template></el-table-column>
        </el-table>
        <NormalPagination :currentPage="pageNum" :pageSize="pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      </div>
      <el-button type="primary" class="dialog-btn" @click="customerConfirm">确定</el-button>
    </el-dialog>
  </div>
</template>


<script>
import { queryCustomerToUserInfo } from "../../../../api/communityOperating/personalSop";

export default {
  name: "customerTable",
  props: {
    userSex: Array,
    customerDialog: Boolean,
    followStatusList: Array,
    selectCustomerList: Array, // 父级页面已有的客户数据
    scrmPersonSopUserRels: {
      type: Array,
      default: []
    },
    activeName: {
      type: String,
      default: "1"
    }
  },
  watch: {
    customerDialog: {
      handler() {
        if (this.customerDialog) {
          this.addCustomerList = JSON.parse(JSON.stringify(this.selectCustomerList));
          this.pageNum = 1;
          this.queryCustomerToUserInfo();
        }
      },
    },
  },
  data() {
    return {
      customerName: "",
      followStatus: "",
      loading: false,
      customerList: [], // table的客户数据
      addCustomerList: [], // 选中的客户数据
      pageNum: 1,
      pageSize: 20,
      total: 0,
    };
  },
  methods: {
    // 搜索
    queryCustomerToUserInfo() {
      console.log('scrmPersonSopUserRels::::::', this.scrmPersonSopUserRels)
      let arr = new Array();
      if(this.activeName == '1'){
        arr = this.scrmPersonSopUserRels.map(item=>{
          return item.weUserId;
        })
      }else{
        arr = this.scrmPersonSopUserRels.map(item=>{
          return item.userId;
        })
      }
      let obj = {
        customerName: this.customerName,
        followStatus: this.followStatus,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        userIds: arr.toString()
      };
      this.customerList = [];
      this.loading = true;
      queryCustomerToUserInfo(obj).then((res) => {
        if (res.code === 200) {
          this.customerList = res.rows;
          this.total = res.total;
          this.loading = false;
          // 已勾选的数据展示勾选状态
          this.selectCustomerList.forEach(item => {
            this.customerList.forEach(x => {
              if (item.userId === x.userId) {
                x.checked = true
              }
            })
          })
        }
      });
    },
    selectionChange(row, checked) {
      // 判断已经新增的数组里有无这条数据  -1：无
      let num = this.addCustomerList.findIndex(f => {
        return f.userId === row.userId;
      })
      if (num < 0) {
        this.customerList.some((item, index) => {
          if (item.userId === row.userId) {
            // 选择
            if (checked) {
              this.addCustomerList.push({
                ...item,
                customerNo: item.customerId,
              })
            } else {
              // 反选
              this.addCustomerList.splice(index, 1)
            }
            return;
          }
        })
      }
    },
    // 确定
    customerConfirm() {
      // 解决实时更新页面
      let list = JSON.parse(JSON.stringify(this.addCustomerList));
      this.$emit("addCustomer", list);
    },
    // 关闭
    customerClose() {
      this.$emit("closeCustomers", false);
    },
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.queryCustomerToUserInfo()
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.queryCustomerToUserInfo()
    },
  },
};
</script>


<style lang='scss' scoped>
@import "../../../../styles/base.scss";

.dialog-wrap {
  display: flex;
  justify-content: flex-start;

  .dialog-list {
    width: 33.33%;
    padding: 0 15px;
    box-sizing: border-box;

    &:nth-child(2) {
      border-left: $normalBorder;
      border-right: $normalBorder;
    }
  }

  .block-wrap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-weight: 600;
    color: #2a2a2a;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;

    .block-item {
      width: 80px;
      padding: 5px 0;
      margin: 10px;
      border: $normalBorder;
      text-align: center;

      .svg-icon {
        width: 4em;
        height: 3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }

  .upload-list {
    display: flex;
    justify-content: space-between;
    border: $normalBorder;
    padding: 0 10px;
  }
}
</style>
